<template>
    <div class="brand">
        <div class="title">
            <img class="back" src="../../assets/Fill 1@2.88x.png" alt="" @click="backs">
            {{navtitle}}
        </div>
        <div class="content">
            <ul class="list">
                <li v-for="(item,index) in goodses" :key="index">
                    <img class="li-img" :src="item.logoUrl" alt="">
                    <p class="zi">{{item.name}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'brand',
    data(){
        return{
            navtitle:'成都康莱商贸有限公司',
            goodses:''
        }
    },
    methods:{
        backs(){
            this.$router.back(-1)
        },
        getAxios(){
            axios.post('https://web-gateway.newbeescm.com/b2b-app-web/getBrandByDealerId/14607',{
                headers:{
                    token: this.$store.state.token,
                    userId: this.$store.state.userInfo.id
                }
            },{}).then(res=>{
                console.log(res);
                if (res.data.status.statusCode === 0) {
                    this.goodses = res.data.result;
                }
            }).catch(err=>{
                console.log(err)
            })
        }
    },
    created(){
        this.$nextTick(()=>{
            this.getAxios()
        })
    }
}
</script>

<style lang="scss" scoped>
.brand{
    width: 100%;
    .title{
        height: 0.435rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        color: #030303;
        font-size: 0.18rem;
        .back{
            position: absolute;
            left:0.14rem;
            bottom: 0.1rem; 
            width: 0.1rem;
            height: 0.18rem;;
        }
        &::after{
            content: "";
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            transform:scale(1,0.5) 
        }
    }
    .content{
        width: 100%;
        .list{
            width: 100%;
            overflow: hidden;
            li{
                width: 25%;
                height: 0.8rem;
                display: flex;
                align-items: center;
                flex-direction: column;
                border-right: 1px solid #ddd;
                border-top: 1px solid #ddd;
                float: left;
                .li-img{
                    width: 63.5%;
                    height: 0.4rem;
                    margin-top: 0.08rem;
                }
                .zi{
                    margin-top: 0.1rem;
                    font-size: 0.12rem;
                }
            }
        }
    }
}
</style>

